import React, { Component, lazy, Suspense } from 'react'
import {Route, Switch, Redirect} from 'react-router-dom'
import Loading from './Components/Loading'

import "./App.css"

import Nav from './Pages/Nav'
// import Home from './Pages/Home'
// import About from './Pages/About'
import Title from './Components/Title'

// 懒加载
const Home = lazy(() => import('./Pages/Home'))
const About = lazy(() => import('./Pages/About'))


export default class App extends Component {
    render() {
        return (
            <div className="app">
                <div className="titleContainer">
                    <Title />
                </div>
                <div className="container">
                    <div className="navContainer">
                        <Nav />
                    </div>
                    <div className="mainContainer">
                        <Switch>
                            <Suspense fallback={<Loading />}>
                                <Route path="/home" component={Home} />
                                <Route path="/about" component={About} />
                                <Redirect to="/home" />
                            </Suspense>
                        </Switch>
                    </div>
                </div>
            </div>
        )
    }
}
